<template>
  <el-dialog
    title="修改密码"
    v-model="pwdVisible"
    width="500px"
    @close="dialogClosed"
  >
    <el-form ref="pwdRef" :model="user" label-width="80px" :rules="rules">
      <el-form-item :label="$t('password.oldPwd')" prop="encodeOldPwd">
        <el-input
          type="password"
          v-model="user.encodeOldPwd"
          :placeholder="$t('password.oldPwdRequired')"
          show-password
          clearable
        />
      </el-form-item>
      <el-form-item :label="$t('password.newPwd')" prop="encodeNewPwd">
        <el-input
          type="password"
          v-model="user.encodeNewPwd"
          :placeholder="$t('password.newPwdRequired')"
          show-password
          clearable
          autocomplete="new-password"
        />
      </el-form-item>
      <el-form-item :label="$t('password.confirmPwd')" prop="confirmPwd">
        <el-input
          type="password"
          v-model="user.confirmPwd"
          :placeholder="$t('password.confirmPwdRequired')"
          show-password
          clearable
          autocomplete="new-password"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogClosed">{{ $t("common.cancel") }}</el-button>
        <el-button type="primary" @click="submitForm">{{
          $t("common.confirm")
        }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive, toRefs } from "vue";
import { ElMessage } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import type { UpdatePwdForm } from "@/api/auth/types";
import { updatePwd } from "@/api/auth/index";
import { netEncrypt } from "@/utils/netsecret";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const pwdRef = ref<FormInstance>();
const props = defineProps({
  pwdVisible: {
    type: Boolean,
    default: false,
  },
});
const { pwdVisible } = toRefs(props);
const emits = defineEmits(["dialogActionChange"]);
let user: UpdatePwdForm = reactive({
  encodeOldPwd: "",
  encodeNewPwd: "",
  confirmPwd: "",
});
const oldPwdValidate = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error(t("password.oldPwdRequired")));
  } else {
    callback();
  }
};
const newPwdValidate = (rule: any, value: any, callback: any) => {
  const ISPWD =
    /^(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%?^&*,\._\+(){}])[0-9a-zA-Z!@#$%?^&*,\\._\+(){}]{8,20}$/; // eslint-disable-line
  if (value === "") {
    callback(new Error(t("password.newPwdRequired")));
  } else if (!ISPWD.test(value)) {
    callback(new Error(t("password.pwdRules")));
  } else {
    callback();
  }
};
const confirmPwdValidate = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error(t("password.confirmPwdRequired")));
  } else if (value !== user.encodeNewPwd) {
    callback(new Error(t("password.comparePwd")));
  } else {
    callback();
  }
};
const rules = reactive<FormRules<UpdatePwdForm>>({
  encodeOldPwd: [
    { required: true, validator: oldPwdValidate, trigger: "blur" },
  ],
  encodeNewPwd: [
    { required: true, validator: newPwdValidate, trigger: "blur" },
  ],
  confirmPwd: [
    { required: true, validator: confirmPwdValidate, trigger: "blur" },
  ],
});

const submitForm = async () => {
  await pwdRef.value?.validate((valid: boolean) => {
    if (valid) {
      let encodeOldPwd = netEncrypt(user.encodeOldPwd);
      let encodeNewPwd = netEncrypt(user.encodeNewPwd);
      updatePwd(encodeOldPwd, encodeNewPwd).then((response) => {
        if (response.status === 200) {
          ElMessage({
            message: t("password.successResetPwd"),
            type: "success",
          });
          emits("dialogActionChange", false);
        }
      });
    } else {
      return Promise.reject();
    }
  });
};

function dialogClosed() {
  pwdRef.value?.resetFields();
  emits("dialogActionChange", false);
}
</script>
